<%@ page language="java" import="java.util.*" pageEncoding="utf-8"  isELIgnored="false"%>
<%@ include file="../tag.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>${article.articleTitle}</title>
<meta name="Keywords" content="Web编程、计算机">
<meta name="description" content="Web编程、计算机">
<%@ include file="../base.jsp"%>
<%@ include file="../alert-common.jsp"%>
<%@ include file="../window-common.jsp"%>
<script src="js/public.js"></script>
<script src="js/articleDetail.js"></script>
</head>
<body>
	<jsp:include page="/expose/top.jsp"></jsp:include>
	<div class="yc_content_inner">
		<input type="hidden" value="${user.chName }" id="currentChName">
		<input type="hidden" value="${article.id}" id="articleId">
		<div style="width: 790px; float: left;">
			<div class="showCon">
				<h1>${article.articleTitle}</h1>
				<h3>
					时间：
					<fmt:formatDate value="${article.createDate}"
						pattern="yyyy-MM-dd HH:mm:ss" />
					&nbsp;&nbsp;来源：${article.user.chName} &nbsp;&nbsp;<font
						color="#ff0000">字体显示：</font><a onclick="javascript:doZoom(18)"
						style="cursor: hand">大</a> <a onclick="javascript:doZoom(16)"
						style="cursor: hand">中</a> <a onclick="javascript:doZoom(12)"
						style="cursor: hand">小 </a>&nbsp;&nbsp;&nbsp;阅读：${article.clickRate}
					次
				</h3>
				<div>
					<p class="p0"
						style="color: #333333; font-family: 'Microsoft Yahei'; font-size: 14px; background-color: #FFFFFF; text-indent: 32pt;">
						<span id="zoom" style="font-family: SimSun; font-size: 14px;">${article.articleContent}</span>
					</p>
				</div>
				<div class="articleDetail">
					<a class="zhichi" href="javascript:void(0);"
						onclick="ajaxClick(1);">支持一下<span>(${article.supportNum})</span></a>
					<a class="fandui" href="javascript:void(0);"
						onclick="ajaxClick(2);">我要吐槽<span>(${article.opposeNum})</span></a>
					<a class="collect" href="javascript:void(0);"
						onclick="ajaxClick(3);">收藏次数<span>(${article.collectNum})</span></a>
				</div>
				<div>
					<div class="comment">
						<div class="pinglun-content" contenteditable="true" id="world">来说两句吧...</div>
						<div class="biaoqing-fabu">
							<div class="biaoqing">
								<a href="javascript:void(0);">插入表情</a>
							</div>
							<div>
								<a href="javascript:void(0);" class="fabu"
									onclick="ajaxComment();">评&nbsp;&nbsp;论</a>
							</div>
						</div>
					</div>
					最新评论
					<div class="pinglun-list">
						<ul>
							<c:forEach items="${comments }" var="comment">
								<li>
									<div style="float: left; width: 80px; height: 70px;">
										<img style="border-radius: 50%; width: 65px; height: 65px;"
											src="expose/article/showPicture/${comment.userId }" />
									</div>
									<div style="width: 630px; float: left;">
										<div class="pinglun-date">${comment.user.chName}:&nbsp;&nbsp;<fmt:formatDate
												value="${comment.commentDate}" pattern="yyyy-MM-dd HH:mm:ss" />
										</div>
										<div class="pinglun-comment">${comment.commentContent }</div>
									</div>
								</li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</div>
			<div class="page">
				<span><a
					href="expose/article/detail/${article.id}&pageNow=1">首页</a></span>
				<c:choose>
					<c:when test="${page.pageNow -1 >0}">
						<span><a
							href="expose/article/detail/${article.id}&pageNow=${page.pageNow-1}">上一页</a></span>
					</c:when>
				</c:choose>
				<c:forEach begin="1" end="${page.totalPageCount}" var="pageIndex">
					<c:choose>
						<c:when test="${page.pageNow==pageIndex}">
							<span><a href="javascript:void(0);"
								style="float: left; background: #EAEAEA;">${pageIndex }</a></span>
						</c:when>
						<c:otherwise>
							<span><a
								href="expose/article/detail/${article.id}&pageNow=${pageIndex}"
								target="_self">${pageIndex }</a></span>
						</c:otherwise>
					</c:choose>
				</c:forEach>
				<c:choose>
					<c:when test="${page.pageNow <page.totalPageCount}">
						<span><a
							href="expose/article/detail/${article.id}&pageNow=${page.pageNow+1 }"
							target="_self">下一页</a></span>
					</c:when>
				</c:choose>
				<span><a
					href="expose/article/detail/${article.id}&pageNow=${page.totalPageCount}">末页</a></span>
			</div>
		</div>
		<div
			style="width: 344px; float: left; margin-left: 10px; margin-top: 56px;">
			<div
				style="width: 344px; height: 380px; float: left; border: 1px solid #DDDDDD;">
				<div
					style="width: 344px; height: 35px; line-height: 35px; text-align: center; border-bottom: 1px solid #DDDDDD;">
					<span style="font-weight: bold; font-size: 14px;">你可能还感兴趣的</span>
				</div>
				<div class="interested" >
					<ul style="margin-top: 10px; margin-left: 2px;">
						<c:forEach items="${articles }" var="atricle">
							<li style="height: 30px; font-size: 13px; margin-left: 3px;">
								<a	href="expose/article/detail/${atricle.id }">${atricle.articleTitle }</a>
							</li>
						</c:forEach>
					</ul>
				</div>
			</div>

			<div	style="margin-top: 410px; width: 344px; height: 340px; line-height: 35px; text-align: center; border: 1px solid #DDDDDD; margin-bottom: 10px;">
				<div
					style="width: 344px; height: 35px; line-height: 35px; text-align: center; border-bottom: 1px solid #DDDDDD;">
					<span style="font-weight: bold; font-size: 14px;">文章来源</span>
				</div>
				<div class="interested">
					<ul style="margin-top: 3px; margin-left: 2px;">
						<li style="height: 150px; font-size: 13px; text-align: center;"><img
							alt="" src="expose/article/showPicture/${u.id }"
							style="border-radius: 50%; height: 150px; width: 150px;"></li>
						<li
							style="font-size: 13px; text-align: center; margin-top: 5px; height: 30px;">
							<span style="float: left; margin-left: 120px; font-weight: bold;">${u.chName }</span>
							<span
							style="float: left;margin-left: 15px;font-weight: bold; 
											<c:if test="${u.grade <5}">color:#999999</c:if>
					               		 	<c:if test="${u.grade >=5 && u.grade <10}">color:#468847</c:if>
					               		 	<c:if test="${u.grade >=10 && u.grade <15}">color:#F89406</c:if>
					               		 	<c:if test="${u.grade >=15 && u.grade <25}">color:#FF0000</c:if>
					               		 	<c:if test="${u.grade >=25}">color:#189AE5</c:if>
										">LV${u.grade }</span>
						</li>
						<li
							style="font-size: 13px; text-align: center; margin-top: 5px; height: 30px;margin-left:40px;">
							<input type="hidden" value="${u.id }" name="authId" id="authId">
							<a href="javascript:void(0);" onclick="attentionArticleAuth();"
							style="float: left; color: #fff; margin-left: 70px; border: 1px solid #E85E3B; background: #E85E3B; width: 60px; height: 25px; line-height: 25px; text-align: center; border-radius: 5px;">关注</a>
							<a href="javascript:void(0);" onclick="sendPrivateMsg();"
							style="float: left; color: #fff; margin-left: 15px; border: 1px solid #E85E3B; background: #E85E3B; width: 60px; height: 25px; line-height: 25px; text-align: center; border-radius: 5px;">发私信</a>
						</li>
						<!-- <li>
							<span>文章</span>
							<span>资源</span>
						</li> -->
					</ul>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="/expose/bottom.jsp"></jsp:include>
</body>
</html>
